<template>
  <el-row :gutter="12">
    <el-col :span="8" v-for="(item,index) in functionModuleName" :key="index" @click="handleClick(item)">
      <el-card class="card" shadow="always">
        {{item}}
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "functionCard",
    data() {
      return {
        functionModuleName: ["个人信息", "学习生涯", "一卡通", "宿舍后勤", "考勤服务", "密码管理"]
      }
    },
    methods: {
      handleClick: function (x) {
        console.log(x);
        console.log(12312);
        this.$router.push({
          name: 'mainPage',//必须带name属性，要不然参数传递不成功。
          params: {
            cardName: x
          }
        });
      }
    }
  }
</script>

<style scoped>
  .el-col {
    margin-bottom: 20px;
  }

  .card {
    /*height: 180px;*/
    line-height: 130px;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
  }
</style>
